import React, { Component } from 'react'
import style from './index.module.styl'
import PropType from 'prop-types'
export default class Total extends Component {
  static propTypes = {
    list: PropType.array.isRequired,
    onAllSelectChange: PropType.func,
    onClearCompletedClick: PropType.func,
  }

  handleOnChange = (ev) => {
    this.props.onAllSelectChange &&
      this.props.onAllSelectChange(ev.target.checked)
  }

  handleClearCompleted = (ev) => {
    this.props.onClearCompletedClick &&
      this.props.onClearCompletedClick(ev.target.checked)
  }

  render() {
    let allCount = this.props.list.length

    let doneCount = this.props.list.reduce(
      (pre, item) => pre + (item.done ? 1 : 0),
      0
    )

    return (
      <div
        style={{
          width: '400px',
          margin: '0 auto',
          textAlign: 'left',
        }}
      >
        <input
          type="checkbox"
          name="all"
          id="all"
          checked={allCount !== 0 && allCount === doneCount}
          onChange={this.handleOnChange}
        />
        已完成 {doneCount} / 全部 {allCount}
        <button className={style.clearBtn} onClick={this.handleClearCompleted}>
          清除已完成任务
        </button>
      </div>
    )
  }
}
